<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			body {
				background: url(img/1.jpg);
				background-size: cover;
			}
			
			.anniu {
				position: fixed;
				left: 50%;
				top: 30%;
				background: url(img/btn-bg.png);
				height: 105px;
				width: 100px;
			}
			
			.db {
				height: 250px;
				position: absolute;
				bottom: 0;
			}
			
			.zz {
				height: 250px;
				width: 50px;
				background-color: #000000;
				position: absolute;
			}
			
			.hcr {
				position: absolute;
				top: -99px;
				left: 0;
			}
			
			.gunzi {
				height: 5px;
				width: 0;
				position: absolute;
				left: 50px;
				top: -5px;
				background: pink;
				transform: rotate(-90deg);
				transform-origin: 2.5px 2.5px;
				transition: transform 0.35s linear;
			}
			
			.jfb {
				font-size: 22px;
				float: left;
			}
			
			.ts {
				height: 30px;
				position: absolute;
				top: 100px;
				left: 50%;
				font-size: 23px;
				line-height: 30px;
			}
			
			.kgg {
				font-size: 20px;
				height: 40px;
				width: 460px;
				line-height: 40px;
				margin-left: 150px;
				float: left;
			}
			
			.kg {
				color: red;
				float: left;
				height: 40px;
				margin-left: 35px;
				width: 130px;
				text-align: center;
				background-color: gold;
			}
			
			.cxks {
				text-align: center;
				float: left;
				color: #000000;
				height: 40px;
				background-color: aquamarine;
				width: 130px;
				margin-left: 15px;
			}
			
			.tckg {
				text-align: center;
				float: left;
				color: #000000;
				height: 40px;
				background-color: cadetblue;
				width: 130px;
				margin-left: 15px;
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="con">
			<button class="anniu" id="anniu"></button>
			<div class="jfb">
				<div>
					计分板:<span class="fs">0</span>关
				</div>
				<div>
					生命值:<span class="sm">3</span>
				</div>
				<div class="pm">平民</div>
			</div>
			<div class="kgg">
				<button class="kg">开挂模式!!!</button>
				<button class="cxks">重新开始</button>
				<button class="tckg">退出开挂</button>
			</div>
			<div class="ts"></div>
			<div class="db">
				<img src="img/stick_stand.png" class="hcr" />
				<div class="gunzi"></div>
				<div class="zz"></div>
				<div class="zz" style="left: 300px;"></div>
			</div>
		</div>
	</body>
	<script>
		$(function() {
			var anniu = $(".anniu")
			var gunzi = $(".gunzi")
			var gzdx = 3000;
			var sm = 3;//生命
			var tscd = $(".ts").width();
			$(".ts").css("margin-left", -tscd / 2 + "px")
			var pdff = function() { //判断生命值
				sm--;
				$(".sm").html(sm)
				gunzi.width(0).css("transform", "rotate(-90deg)");
				czff()
				if(sm <= 0) {
					alert("生命值耗尽页面重置");
					window.location.reload()
				}
			}
			var czff = function() { //火柴人和棍子归零
				$(".zz:first").fadeOut(300, function() {
					$(this).remove()
				})
				$(".zz:last,.hcr").animate({
					"left": "0px"
				}, 900, function() {
					$(".hcr").animate({
						"top": "-99px"
					}, 100)
					if($(".zz").length > 1) {
						return;
					}
					sjs = 60 + parseInt((Math.random() * 250))
					var zz = '<div class="zz" style="left:' + sjs + 'px"></div>'
					$(".db").append(zz)
				})
				anniu.show()
			}
			var ffb = function() {
				gunzi.animate({
					"width": "500px"
				}, gzdx)
			}
			var ffa = function() {
				anniu.hide()
				var tscd = $(".ts").width();
				$(".ts").css("margin-left", -tscd / 2 + "px")
				gunzi.stop()
				gunzi.css("transform", "rotate(0)");
				setTimeout(function() {
					$(".hcr").attr("src", "img/stick.gif").animate({
							"left": gunzi.width() + "px"
						}, gunzi.width() * 5,
						function() {
							$(".hcr").attr("src", "img/stick_stand.png")
							if($(".zz").eq(1).offset().left > gunzi.width() + 50) {
								$(".hcr").animate({
									"top": "150px"
								}, 800, function() {
									var end = confirm('棍子过短你失败了');
									if(end) {
										pdff()
									} else {
										pdff()
									}
								})
							} else if(gunzi.width() + 50 > $(".zz").eq(1).offset().left + 50) {
								$(".hcr").animate({
									"top": "150px"
								}, 800, function() {
									var end = confirm('棍子过长你失败了');
									if(end) {
										pdff()
									} else {
										pdff()
									}
								})
							} else {
								var fs = parseInt($(".fs").text());
								gunzi.width(0).css("transform", "rotate(-90deg)");
								fs += 1;
								$(".fs").text(fs)
								if(fs >= 5 && fs < 6) {
									$(".ts").html("恭喜您达到倔强青铜！！难度增高，生命值+1")
									$(".pm").html("倔强青铜");
									sm++;
									gzdx -= 300;
									$(".sm").html(sm)
								} else if(fs >= 10 && fs < 11) {
									$(".ts").html("恭喜您达到秩序白银！！难度增高，生命值+1")
									$(".pm").html("秩序白银");
									sm++;
									gzdx -= 300;
									$(".sm").html(sm)
								} else if(fs >= 15 && fs < 16) {
									$(".ts").html("恭喜您达到荣耀黄金！！难度增高，生命值+1")
									$(".pm").html("英勇黄金");
									sm++;
									gzdx -= 300;
									$(".sm").html(sm)
								} else if(fs >= 20 && fs < 21) {
									$(".ts").html("恭喜您达到尊贵铂金！！难度增高，生命值+1")
									$(".pm").html("尊贵铂金");
									sm++;
									gzdx -= 300;
									$(".sm").html(sm)
								} else if(fs >= 35 && fs < 36) {
									$(".ts").html("恭喜您达到至尊星耀！！难度增高，生命值+1")
									$(".pm").html("至尊星耀");
									sm++;
									gzdx -= 300;
									$(".sm").html(sm)
								} else if(fs >= 50 && fs < 51) {
									$(".ts").html("恭喜您达到荣耀王者段位！！难度增高，生命值+1")
									$(".pm").html("荣耀王者");
									sm++;
									gzdx -= 300;
									$(".sm").html(sm)
								} else {
									$(".ts").html("")

								}
								czff();
							}
						})
				}, 500)
			}
			var sjs = 300;
			anniu.mousedown(ffb).mouseup(ffa);
			$(".cxks").click(function() {
				window.location.reload();
			})
			$(".kg").click(function() {
				var kgmskq = confirm('一局只能开启一次，是否开启？')
				if(kgmskq) {
					$(".tckg").show().click(function() {
						clearInterval(dsq)
						$(".tckg").hide()
						anniu.mousedown(ffb).mouseup(ffa);
					})
					var dsq = setInterval(function() {
						gunzi.width(sjs);
						ffa();
					}, 3000)
					$(".kg").unbind()
					$(".anniu").unbind()
				}
			})
		})
	</script>

</html>